<template>
	<div class="warp-box">
    <el-row :gutter="20" class="main-box" style="margin:10px -5px;;min-height:500px" type="flex">
      <el-col :span="6" style="width:280px;border-right: #e9e9e9 solid 1px">
        <a-input-search style="margin-bottom: 8px" placeholder="请输入查询内容" @change="onChange" />
        <a-tree
          showLine
          @expand="onExpand"
          :treeData="gData"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          :defaultSelectedKeys="defaultSelectedKeys"
          @select="this.onSelect"
        >
          <template slot="title" slot-scope="{title,key}">
            <span v-if="title.indexOf(searchValue) > -1">
              {{title.substr(0, title.indexOf(searchValue))}}
              <span style="color: #f50">{{searchValue}}</span>
              {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
            </span>
            <span v-else>{{title}}</span>
            <a-dropdown :trigger="['click']">
                <a-icon type="bars" style="color:#409EFF"/>
                <a-menu slot="overlay">
                  <a-menu-item @click="handleAddChild">
                    <a-icon type="plus-circle" />添加产品
                  </a-menu-item>
                  
                  <!-- <a-menu-item @click="handleEditOrgan">
                    <a-icon type="edit" />修改名称
                  </a-menu-item> -->
                  <a-menu-divider />
                  <a-menu-item @click="handleEditType">
                    <a-icon type="plus-circle" />修改分类
                  </a-menu-item>
                  <a-menu-item @click="handleCanleType(key)">
                    <a-icon type="delete" />删除类型
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
          </template>
        </a-tree>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col :span="24">
            <el-button size="small" type="primary" @click="handleAddType">添加产品类型</el-button>
            <!-- <el-button size="small" type="primary" @click="handleAddMenu">添加子菜单</el-button> -->
          </el-col>
          <el-col :span="24" style="margin-top:14px;">
            <el-table
            :data="dataList"
            border
            v-loading="loading"
            row-key="key"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
              <el-table-column
                prop="productName"
                min-width="180"
                label="产品名称">
              </el-table-column>
              <el-table-column
                prop="productDesc"
                label="产品描述">
              </el-table-column>
              <el-table-column 
                width="120"
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditProduct(scope.row)"></el-button>
                    <a-popconfirm
                    title="是否确认删除?"
                    @confirm="handleDelProduct(scope.row)"
                    okText="是"
                    cancelText="否">
                        <el-button @click.stop="" size="mini" type="text" icon="el-icon-delete"></el-button>
                    </a-popconfirm>
                </template>
              </el-table-column>
            </el-table>

          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <typeDialog :typeData="typeData" @checkRender="checkRender"></typeDialog>
    <productDialog :productData="productData" @checkRender="checkRender"></productDialog>

	</div>
</template>
<script>
  import typeDialog from './addProductTypeDialog'
  import productDialog from './addProductDialog'

  const gData = [];
  const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some(item => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };
  export default {
    data() {
      return {
        loading: false,
        expandedKeys: [],
        defaultSelectedKeys: [], //默认选中的树节点
        searchValue: '',
        autoExpandParent: true,
        gData,
        treeList: [],
        dataList: [],
        typeData: {
          id: '',
          type: '',
          show: false,
        },
        productData: {
          id: '',
          productTypeId: '',
          type: '',
          show: false,
        }
      };
    },
    methods: {
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onChange(e) { //查询组织架构
        const value = e.target.value;
        const expandedKeys = this.treeList.map(item => {
            if (item.title.indexOf(value) > -1) {
              return getParentKey(item.key, this.gData);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true,
        });
      },
      postBaseInfoProductTypeFind () { //根据产品类型id查看产品
        this.loading = true
        this.$post(this.$api.postBaseInfoProductListByType, {
            productTypeId: this.typeData.id
        }).then(response => {
          if (response.data.succeed) {
            this.dataList = response.data.data
            setTimeout(() => {
              this.loading = false
            }, 200);
          }
        })
      },
      onSelect(selectedKeys, info) { //点击菜单树节点
        if(selectedKeys.length != 0) {
          var node = info.selectedNodes[0].data.props.dataRef //菜单数据
          this.typeData.id = node.id
          this.typeData.name = node.title
          this.typeData.typeDesc = node.typeDesc
          this.dataList = []
          this.productData.productTypeId = node.id
          this.postBaseInfoProductTypeFind()
        }
      },
      checkRender () {
        this.getTree()
      },
      handleAddType () { //添加类型
        this.typeData.title = '新增分类'
        this.typeData.type = 'new'
        this.typeData.show = true
      },
      handleEditType () { //修改分类
        this.typeData.title = '修改分类'
        this.typeData.type = 'edit'
        this.typeData.show = true
      },
      handleAddChild () { //添加产品
        this.productData.title = '新增产品'
        this.productData.type = 'new'
        this.productData.name = ''
        this.productData.show = true
      },
      handleEditProduct (key) { //修改产品
        this.productData.title = '修改产品'
        this.productData.type = 'edit'
        this.productData.id = key.id
        this.productData.name = key.productName
        this.productData.productDesc = key.productDesc
        this.productData.show = true
      },
      handleCanleType (key) { //删除类型
        this.$post(this.$api.postBaseInfoProductTypeDel,{
          productTypeId: key,
        }).then(response => {
          if (response.data.succeed) {
            this.getTree()
          }
        })
      },
      handleDelProduct (key) { //删除产品
        this.$post(this.$api.postBaseInfoProductDel,{
          productId: key.id,
        }).then(response => {
          if (response.data.succeed) {
            this.postBaseInfoProductTypeFind()
          }
        })
      },
      generateList (data) { //树的搜索
        for (let i = 0; i < data.length; i++) {
          const node = data[i];
          const key = node.key;
          this.treeList.push({ key, title: node.title});
          if (node.children) {
            this.generateList(node.children, node.key);
          }
        }
      },
      getTree () { //获取菜单数据
        this.$post(this.$api.postBaseInfoProductTypeList).then(response => {
          if (response.data.succeed) {
            this.gData = []
            if (response.data.data.length > 0) {
              response.data.data.forEach(el=>{
                this.getData(el)
                if (el.title) {
                  this.gData.push(el)
                }
              })
              this.generateList(this.gData)
              this.typeData.id = this.gData[0].id
              this.productData.productTypeId = this.gData[0].id
                this.postBaseInfoProductTypeFind()
                this.defaultSelectedKeys.push('2c9aef9b6f6e2f1e016f74ca5c430019')

            }
          }
        })
      },
      getData(data) { //处理树数据
        data.title = data.typeName
        data.key = data.id //
        data.scopedSlots = { title: 'title', key: 'key', parentId: 'parentId'}
        if (data.children && data.children.length > 0) {
          for(var i = 0; i < data.children.length; i++) {
            this.getData(data.children[i])
          }
        }
      }
    },
    mounted() {
      this.getTree()
    },
    components: {
      typeDialog,
      productDialog
    }
  };
</script>
